import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

function createLabel(object, data) {
    object.geometry.computeBoundingBox(); // Calculate bounding box

    const labelDiv = document.createElement('div');
    labelDiv.className = 'label-wrapper';
    labelDiv.innerHTML = `
        <div class="label-bottom"></div>
        <div class="label-line-1"></div>
        <div class="label-line-2"></div>
        <div class="label-content">
            <h3 class="label-name">${data.name}</h3>
            <div class="label-item">进程:xxxx</div>
            <div class="label-item">进程:xxxx</div>
            <div class="label-item">进程:xxxx</div>
            <div class="label-item">进程:xxxx</div>
        </div>
    `;

    const label = new CSS3DObject(labelDiv);

    const p_x = (data.position || [])[0] || 0;
    const p_y = (data.position || [])[1] || object.geometry.boundingBox.max.y || 0;
    const p_z = (data.position || [])[2] || 0;

    if (data.position) {
        console.log(`bigScreen.html 201 [data.position]`, data.position);
    }

    label.position.set(p_x, p_y, p_z);

    if (!window.middle_shebei) {
        window.middle_shebei = {};
    }
    window.middle_shebei[data.name + '_xuanfu'] = label;
    console.log(`bigScreen.html 209 [middle_shebei['2号机台'].position]`, window.middle_shebei[data.name + '_xuanfu'].position);

    object.add(label);

    return label;
}

// Create CSS3DRenderer
const css3DRenderer = new CSS3DRenderer();
css3DRenderer.setSize(window.innerWidth, window.innerHeight);
css3DRenderer.domElement.style.position = 'absolute';
css3DRenderer.domElement.style.top = '0';
document.body.appendChild(css3DRenderer.domElement);

// Assuming you have a scene and camera set up
function animate() {
    requestAnimationFrame(animate);
    css3DRenderer.render(scene, camera);
}

animate();

export { createLabel };

